<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<html>
<head>
<title>登录页面</title>
<style type="text/css">

input{
    width: 320px;
    height: 45px;
    margin: 0px 8px;
    border-radius: 10px; /*圆角矩形*/
    text-indent: 10px; /*里面隐形的字体首行缩进*/
    margin: 10px auto;
}
#btn_submit{
    width: 200px;
    height: 45px;
    margin: 0px 4px;
    border-radius: 8px; /*圆角矩形*/
    text-indent: 5px; /*里面隐形的字体首行缩进*/
    margin: 5px auto;
}
table{

	text-align:center;
}
tr{
align:center;
}
#table_div{
width:800px;
margin:0 auto;
position: absolute;height:400px;left:20%;top:20%;

}
</style>
	<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
	//刷新验证码
	function refresh() {
		loginForm.vCode.src = encodeURI("code.jsp?id=" + new Date());
	}
	$(function (){
		$("#btn_submit").click(function(){
			//获取参数：
			var code=$("#code").val();
			var account=$("#account").val();
			var password=$("#password").val();
			$.ajax({
				url:'loginServlet',
				type:'post',
				data:{
					code:code,
					password:password,
					account:account,
				},
				dataType:"json",
				success:function(data){
					if (data=="success"){
						window.location.href='showAllBooksServlet';
					}else{
						$("#toolTip").html(data);
					}

				}
			})
		})
	})


</script>
</head>
<body>
<form  name="loginForm" id="loginForm">
	<div id="table_div">
		<table>
			<tr>
				<td colspan="3"><h2>图书信息管理系统</h2></td>
			</tr>
			<tr>
				<td>账号：</td>
				<td><input id="account" class="inputinfo" type="text"
						   name="account" placeholder="账号" /></td><td></td>
			</tr>
			<tr>
				<td>密码：</td>
				<td><input id="password" class="inputinfo" type="password"
						   name="password" placeholder="密码" /></td><td></td>
			</tr>
			<tr>
				<!-- 添加验证码 -->
				<td>验证码：</td>
				<td><input id="code" class="inputinfo" type="text" name="code"
						   placeholder="验证码" /></td>
				<td><img src="code.jsp" name="vCode" onclick="refresh()"></td>
			</tr>
			<tr>
				<td colspan="2"><input id="btn_submit" type="button"
									   value="登录" /></td>
			</tr>
			<tr>
				<td colspan="3">
					<!-- 此处显示验证码、用户名或密码输入错误信息 -->
					<div id="toolTip"></div>
				</td>
			</tr>
		</table>
	</div>
</form>
</body>
</html>
